<template>
	 <NavBar  :color="'#fff'" :size="26"  title='卡密兑换' top='75rpx' colorText='#000'>
  <view class="card-exchange-container">
    <!-- 导航栏 -->
    <!-- <view class="nav-bar">
      <view class="back-button" @click="goBack">
        <text class="back-icon"><</text>
      </view>
      <text class="nav-title">卡密兑换</text>
      <view class="nav-placeholder"></view>
    </view> -->
   
    <!-- 主横幅 -->
    <view class="hero-banner">
       <image class="hero-banner-banner" src="/static/kami.png" mode=""></image>
    </view>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 输入区域 -->
      <view class="input-section">
        <view class="input-fields">
          <template v-for="(field, index) in inputFields" :key="index">
            <input
              :ref="el => inputRefs[index] = el"
              class="code-input"
              :class="{
                'active': currentInputIndex === index,
                'completed': field.value.length === 4,
                'next-focus': currentInputIndex === index + 1 && field.value.length < 4
              }"
              v-model="field.value"
              @input="onInputChange(index, $event)"
              @focus="onInputFocus(index)"
              @keydown="onKeyDown(index, $event)"
              @longpress="onLongPress(index)"
              maxlength="4"
              placeholder="XXXX"
            />
            <text v-if="index < 3" class="input-separator">-</text>
          </template>
        </view>
        
        <button 
          class="exchange-btn" 
          @click="handleExchange"
          :disabled="!canExchange"
          :class="{ 'disabled': !canExchange }"
        >
          {{ isExchanging ? '兑换中...' : '立即兑换' }}
        </button>
      </view>
       <view class="line"></view>
      <!-- 兑换规则 -->
      <view class="rules-section">
        <text class="rules-title">兑换规则</text>
        <view class="rules-list">
          <view class="rule-item" v-for="(rule, index) in cardRules" :key="index">
            <text class="rule-text">{{ rule }}</text>
          </view>
        </view>
      </view>
    </view>
	</view>
    </NavBar>
    <CommonPopup
      ref="successPopup"
      :title="popupTitle"
      :message="popupMessage"
      :type="popupType"
    />

    <!-- 登录弹窗组件 -->
    <LoginModal
      ref="loginModalRef"
      @close="onLoginModalClose"
      @skip="onLoginSkip"
      @login="onLoginSuccess"
    />
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import { isLoggedIn, navigateToLogin, getToken, fetchUserInfo } from '../../utils/user.js'
import { isWeixinMiniProgram } from '../../utils/platform.js'
import { CARDKEY_API } from '../../config/api.js'
import { getRuleConfig } from '../../utils/config.js'
import LoginModal from '@/components/LoginModal/LoginModal.vue'
import CommonPopup from '@/components/CommonPopup/CommonPopup.vue'
// 响应式数据
const inputFields = ref([
  { value: '' },
  { value: '' },
  { value: '' },
  { value: '' }
])
const isExchanging = ref(false)
const failMessage = ref('')
const currentInputIndex = ref(0)
const successPopup = ref(false)

// 弹窗控制数据
const popupTitle = ref('兑换失败')
const popupMessage = ref('卡密输入错误，请重新输入！')
const popupType = ref('error')

// 卡密兑换规则
const cardRules = ref<string[]>([
  '1. SVIP与资源包卡密购买请联系客服',
  '2. 长按输入框,自动识别剪切板卡密内容',
  '3. 每张卡密仅能使用1次,使用后立即失效',
  '4. 卡密兑换后无法撤回,一经使用概不退款'
])

// 输入框引用
const inputRefs = ref([])
const loginModalRef = ref()

// 兑换信息
const exchangeInfo = ref({
  type: 'VIP会员',
  count: 30,
  expireDate: '2025-01-28'
})

// 计算属性
const canExchange = computed(() => {
  return inputFields.value.every(field => field.value.length === 4) && !isExchanging.value
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

// 验证卡密格式
const validateCardKey = (cardKey: string) => {
  if (!cardKey || typeof cardKey !== 'string') {
    return false
  }

  const trimmedKey = cardKey.trim().toUpperCase()

  // 检查长度19位（含-符号）格式为XXXX-XXXX-XXXX-XXXX
  const formatWithHyphenRegex = /^[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/
  if (formatWithHyphenRegex.test(trimmedKey)) {
    console.log('卡密格式验证通过（含-符号）:', trimmedKey)
    return true
  }

  // 检查长度16位（不含-符号）格式为XXXXXXXXXXXXXXXX
  const formatWithoutHyphenRegex = /^[A-Z0-9]{16}$/
  if (formatWithoutHyphenRegex.test(trimmedKey)) {
    console.log('卡密格式验证通过（不含-符号）:', trimmedKey)
    return true
  }

  console.log('卡密格式验证失败:', trimmedKey)
  return false
}

// 格式化卡密（添加-符号）
const formatCardKey = (cardKey: string) => {
  // 移除所有-符号
  const cleanKey = cardKey.replace(/-/g, '')
  // 按4位分组添加-符号
  return cleanKey.replace(/(.{4})/g, '$1-').slice(0, -1)
}

// 页面加载时自动识别剪切板卡密
const checkClipboard = async () => {
  try {
    const clipboardData = await uni.getClipboardData()
    const content = clipboardData.data.trim().toUpperCase()

    console.log('页面加载自动检查剪切板内容:', content)

    // 检查当前输入框是否已有内容
    const hasExistingInput = inputFields.value.some(field => field.value.length > 0)

    if (validateCardKey(content)) {
      console.log('检测到有效卡密格式')

      if (!hasExistingInput) {
        // 只有在输入框为空时才自动填充
        fillCardKey(content)

        // 显示自动识别提示
        uni.showToast({
          title: '已自动识别卡密',
          icon: 'success',
          duration: 1500
        })
        console.log('自动填充卡密完成')
      } else {
        console.log('输入框已有内容，跳过自动填充')
      }
    } else {
      console.log('剪切板内容不是有效卡密格式，跳过自动填充')
    }
  } catch (error) {
    console.log('页面加载读取剪切板失败:', error)
    // 页面加载时失败不显示错误提示，静默处理
  }
}

// 填充卡密到输入框
const fillCardKey = (cardKey: string) => {
  if (!cardKey || typeof cardKey !== 'string') {
    console.error('无效的卡密内容:', cardKey)
    return
  }

  // 移除-符号，只保留16位字符
  const cleanKey = cardKey.replace(/-/g, '').toUpperCase()

  console.log('开始填充卡密:', cleanKey)

  // 确保长度为16位
  if (cleanKey.length === 16) {
    // 分割成4组，每组4位
    for (let i = 0; i < 4; i++) {
      const start = i * 4
      const end = start + 4
      const segment = cleanKey.substring(start, end)
      inputFields.value[i].value = segment
      console.log(`填充第${i + 1}个输入框:`, segment)
    }

    console.log('卡密填充完成，当前输入框内容:', inputFields.value.map(field => field.value))

    // 更新当前输入框索引到最后一个
    currentInputIndex.value = 3
  } else {
    console.error('卡密长度不正确，期望16位，实际:', cleanKey.length, '内容:', cleanKey)
  }
}





// 显示登录弹窗
const showLoginModal = () => {
  loginModalRef.value.open()
}

// 登录弹窗事件处理
const onLoginModalClose = () => {
  console.log('登录弹窗关闭')
}

const onLoginSkip = () => {
  uni.showToast({
    title: '暂不登录',
    icon: 'none',
    duration: 2000
  })
}

const onLoginSuccess = () => {
  //弹框处理了登录逻辑 这里只处理登录完成逻辑
}

// 清空所有输入框
const clearAllInputs = () => {
  inputFields.value.forEach(field => field.value = '')
  currentInputIndex.value = 0
  console.log('已清空所有输入框')
}

// 加载卡密兑换规则
const loadCardRules = async () => {
  try {
    const ruleConfig = await getRuleConfig(false)
    console.log('卡密兑换规则配置:', ruleConfig)

    // 读取 card_rule 字段
    if (ruleConfig.card_rule) {
      // 根据 \n 分割规则
      const rules = ruleConfig.card_rule.split('\n').filter((rule: string) => rule.trim() !== '')
      if (rules.length > 0) {
        cardRules.value = rules
        console.log('卡密兑换规则加载成功:', rules)
      } else {
        console.log('没有配置卡密兑换规则，使用默认规则')
      }
    } else {
      console.log('没有配置 card_rule 字段，使用默认规则')
    }
  } catch (error) {
    console.error('加载卡密兑换规则失败:', error)
    // 使用默认规则
  }
}

// 页面加载时检查剪切板和加载规则
onMounted(() => {
  checkClipboard()
  loadCardRules()
})

// 页面退出时清空输入框
onUnmounted(() => {
  clearAllInputs()
})

const onInputChange = (index: number, event: any) => {
  const value = event.detail.value
  inputFields.value[index].value = value
  
  console.log(`输入框 ${index} 输入了: ${value}, 长度: ${value.length}`)
  
  // 自动跳转到下一个输入框
  if (value.length === 4 && index < 3) {
    console.log(`准备跳转到输入框 ${index + 1}`)
    currentInputIndex.value = index + 1
    // 自动聚焦到下一个输入框
    setTimeout(() => {
      focusNextInput(index + 1)
    }, 100)
  }
}

const onInputFocus = async (index: number) => {
  currentInputIndex.value = index
  console.log(`焦点切换到第${index + 1}个输入框`)

  // 获得焦点时检查剪切板内容
  try {
    const clipboardData = await uni.getClipboardData()
    const content = clipboardData.data.trim().toUpperCase()

    console.log('焦点事件检查剪切板内容:', content)

    if (validateCardKey(content)) {
      console.log('剪切板内容符合卡密规则，自动填充')

      // 先清空所有输入框
      inputFields.value.forEach(field => field.value = '')

      // 填充卡密
      fillCardKey(content)

      // 显示自动填充提示
      uni.showToast({
        title: '已自动识别并填充卡密',
        icon: 'success',
        duration: 1500
      })
    } else {
      console.log('剪切板内容不符合卡密规则，不进行填充')
    }
  } catch (error) {
    console.log('焦点事件读取剪切板失败:', error)
    // 读取失败时不显示错误提示，静默处理
  }
}

const onKeyDown = (index: number, event: any) => {
  // 处理退格键
  if (event.keyCode === 8 && inputFields.value[index].value === '' && index > 0) {
    currentInputIndex.value = index - 1
    setTimeout(() => {
      focusNextInput(index - 1)
    }, 50)
  }
}

const focusNextInput = (index: number) => {
  console.log(`尝试聚焦到输入框 ${index}`)
  
  // 使用更直接的方法
  setTimeout(() => {
    if (typeof document !== 'undefined') {
      const inputs = document.querySelectorAll('.code-input')
      console.log(`找到 ${inputs.length} 个输入框`)
      
      if (inputs[index]) {
        const inputElement = inputs[index] as HTMLInputElement
        console.log(`准备聚焦输入框 ${index}`)
        
        // 直接聚焦，不使用滚动
        try {
          inputElement.focus()
          console.log(`聚焦成功`)
        } catch (e) {
          console.log(`聚焦失败:`, e)
          // 如果聚焦失败，尝试点击
          try {
            inputElement.click()
            console.log(`点击成功`)
          } catch (e2) {
            console.log(`点击也失败:`, e2)
          }
        }
      } else {
        console.log(`输入框 ${index} 不存在`)
      }
    } else {
      console.log('document 不存在')
    }
  }, 200)
}

const handleExchange = async () => {
  if (!canExchange.value) return

  // 检查登录状态
  const loginStatus = isLoggedIn()
  if (!loginStatus) {
    // 判断是否为微信小程序
    if (isWeixinMiniProgram()) {
      // 微信小程序显示登录弹窗
      showLoginModal()
    } else {
      // 其他平台跳转到登录页面
      navigateToLogin('/pages/card-exchange/card-exchange')
    }
    return
  }

  isExchanging.value = true

  try {
    // 拼接卡密（不带-符号）
    const cardKey = inputFields.value.map(field => field.value).join('')

    console.log('开始兑换卡密:', cardKey)

    // 获取用户token
    const token = getToken()
    if (!token) {
      console.error('未找到用户token');
      return
    }
    // 显示 loading 加载动画
    uni.showLoading({
      title: '兑换中...',
      mask: true // 防止用户点击其他区域
    })

    // 调用兑换API
    const response = await uni.request({
      url: CARDKEY_API.EXCHANGE,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      data: {
        card_key: cardKey
      }
    })

    uni.hideLoading() // 关闭 loading
    console.log('兑换API响应:', response)

    if (response.statusCode === 200 && response.data.code === 200) {
      // 兑换成功
      const responseData = response.data.data
      console.log('兑换成功数据:', responseData)

      // 根据 card_type 设置弹窗内容
      if (responseData.card_type === 0) {
        // card_type = 0: 显示次数
        popupTitle.value = '兑换成功'
        popupMessage.value = `获得${responseData.card_description}次数。`
        popupType.value = 'success'
      } else {
        // card_type = 其他数值: 显示永久SVIP
        popupTitle.value = '兑换成功'
        popupMessage.value = '获得永久SVIP。'
        popupType.value = 'success'
      }

      // 显示弹窗
      successPopup.value.show()

      // 清空输入框
      inputFields.value.forEach(field => field.value = '')

      // 刷新用户信息
      try {
        await fetchUserInfo()
        console.log('用户信息刷新成功')
      } catch (error) {
        console.error('刷新用户信息失败:', error)
        // 刷新用户信息失败不影响兑换成功的提示
      }
    } else {
      // 兑换失败
      const errorMessage = response.data?.data?.error_message || response.data?.error_message || response.data?.message || '卡密无效或已过期'

      popupTitle.value = '兑换失败'
      popupMessage.value = errorMessage
      popupType.value = 'error'

      successPopup.value.show()
    }
  } catch (error) {
    console.error('兑换失败:', error)

    popupTitle.value = '兑换失败'
    popupMessage.value = '网络连接失败，请重试'
    popupType.value = 'error'

    successPopup.value.show()
  } finally {
    // 关闭 loading 加载动画
    uni.hideLoading()
    isExchanging.value = false
  }
}
// 点击粘贴按钮处理粘贴功能
const handlePaste = () => {
  uni.getClipboardData({
    success: (res) => {
      const clipboardData = res.data
      if (clipboardData) {
        // 移除所有非数字和字母的字符
        const cleanData = clipboardData.replace(/[^a-zA-Z0-9]/g, '')
        
        if (cleanData.length >= 16) {
          // 如果剪贴板内容足够长，自动填充所有输入框
          const codeArray = cleanData.match(/.{1,4}/g) || []
          
          codeArray.forEach((code, i) => {
            if (i < inputFields.value.length) {
              inputFields.value[i].value = code.substring(0, 4)
            }
          })
          
          // 聚焦到最后一个有内容的输入框
          const lastFilledIndex = Math.min(codeArray.length - 1, inputFields.value.length - 1)
          currentInputIndex.value = lastFilledIndex
          
          // 检查是否可以兑换
          checkCanExchange()
          
          uni.showToast({
            title: '已自动填充卡密',
            icon: 'success',
            duration: 1500
          })
        } else if (cleanData.length > 0) {
          // 如果内容不够长，只填充第一个输入框
          inputFields.value[0].value = cleanData.substring(0, 4)
          onInputChange(0, { detail: { value: cleanData.substring(0, 4) } })
          
          uni.showToast({
            title: '已填充部分卡密',
            icon: 'none',
            duration: 1500
          })
        } else {
          uni.showToast({
            title: '剪贴板内容为空',
            icon: 'none',
            duration: 1500
          })
        }
      }
    },
    fail: () => {
      uni.showToast({
        title: '获取剪贴板内容失败',
        icon: 'none',
        duration: 1500
      })
    }
  })
}

// 长按事件处理粘贴功能
const onLongPress = (index: number) => {
  console.log('粘贴事件')
  uni.getClipboardData({
    success: (res) => {
      const clipboardData = res.data
      if (clipboardData) {
        // 移除所有非数字和字母的字符
        const cleanData = clipboardData.replace(/[^a-zA-Z0-9]/g, '')
        
        if (cleanData.length >= 4) {
          // 如果剪贴板内容足够长，自动填充所有输入框
          const codeArray = cleanData.match(/.{1,4}/g) || []
          
          codeArray.forEach((code, i) => {
            if (i < inputFields.value.length) {
              inputFields.value[i].value = code.substring(0, 4)
            }
          })
          
          // 聚焦到最后一个有内容的输入框
          const lastFilledIndex = Math.min(codeArray.length - 1, inputFields.value.length - 1)
          currentInputIndex.value = lastFilledIndex
          
          // 检查是否可以兑换
          checkCanExchange()
          
          uni.showToast({
            title: '已自动填充卡密',
            icon: 'success',
            duration: 1500
          })
        } else {
          // 如果内容不够长，只填充当前输入框
          inputFields.value[index].value = cleanData.substring(0, 4)
          onInputChange(index, { detail: { value: cleanData.substring(0, 4) } })
          
          uni.showToast({
            title: '已填充部分卡密',
            icon: 'none',
            duration: 1500
          })
        }
      }
    },
    fail: () => {
      uni.showToast({
        title: '获取剪贴板内容失败',
        icon: 'none',
        duration: 1500
      })
    }
  })
}
</script>

<style scoped>
.card-exchange-container {
  min-height: 100vh;
  position: relative;
  background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: white;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #000;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background: #E3F2FD;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 32rpx;
  color: #666;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-placeholder {
  width: 60rpx;
  height: 60rpx;
  background: white;
  border-radius: 30rpx;
}

/* 主横幅 */
.hero-banner {
  padding: 170rpx 30rpx 0;
  position: relative;
  overflow: hidden;
}


.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.banner-left {
  flex: 1;
}

.banner-title {
  font-size: 56rpx;
  font-weight: 800;
  color: white;
  display: block;
  margin-bottom: 30rpx;
  text-shadow: 0 2rpx 4rpx rgba(255, 193, 7, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.banner-slogan {
  display: flex;
  align-items: center;
  gap: 16rpx;
  background: white;
  padding: 16rpx 24rpx;
  border-radius: 20rpx;
  border: 2rpx solid #9C27B0;
  width: fit-content;
}

.slogan-icon {
  font-size: 24rpx;
}

.slogan-text {
  font-size: 24rpx;
  color: #9C27B0;
  font-weight: 600;
}

.banner-right {
  position: relative;
}

.robot-character {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.robot-head {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  border-radius: 40rpx;
  position: relative;
  margin: 0 auto;
}
.hero-banner-banner{
	width: 100%;
	height: 242rpx;
	
}
.robot-antennae {
  position: absolute;
  top: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20rpx;
}

.antenna {
  width: 4rpx;
  height: 20rpx;
  background: #9C27B0;
  border-radius: 2rpx;
}

.antenna::after {
  content: '';
  position: absolute;
  top: -6rpx;
  left: -3rpx;
  width: 10rpx;
  height: 10rpx;
  background: #FFD700;
  border-radius: 50%;
}

.robot-body {
  width: 100rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  border-radius: 20rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10rpx;
}

.robot-x {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}

.robot-card {
  position: absolute;
  top: 20rpx;
  right: -40rpx;
  width: 80rpx;
  height: 50rpx;
  background: #2196F3;
  border: 2rpx solid white;
  border-radius: 8rpx;
  padding: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-qr {
  font-size: 16rpx;
  color: white;
  margin-bottom: 4rpx;
}

.card-line {
  width: 100%;
  height: 2rpx;
  background: white;
  margin: 4rpx 0;
  border-radius: 1rpx;
}

.card-code {
  font-size: 12rpx;
  color: white;
  font-weight: bold;
  text-align: center;
}

.lock-icon {
  position: absolute;
  top: 40rpx;
  right: -60rpx;
  font-size: 24rpx;
  color: white;
}

/* 主内容区域 */
.main-content {
  padding:20rpx 30rpx 30rpx;
  background-image: url('/static/card.png');
  background-size: 100% 100%;
  height: 780rpx;
  background-size: 100% 100%;
  width: 86%;
  margin: 20rpx auto;
}

/* 输入区域 */
.input-section {
  border-radius: 20rpx;
  padding: 60rpx;
  margin-bottom: 57rpx;
}

.input-fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 60rpx;
}

.code-input {
  width: 120rpx;
  height: 80rpx;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  background: #F8F9FA;
  transition: all 0.3s ease;
}

/* placeholder 样式 - 缩小字体 */
.code-input::placeholder {
  font-size: 16rpx; /* 进一步缩小 placeholder 字体 */
  font-weight: normal;
  color: #BDBDBD;
}

.code-input:focus {
  border-color: #2196F3;
  background: white;
  box-shadow: 0 0 0 4rpx rgba(33, 150, 243, 0.1);
}

.code-input.active {
  border-color: #2196F3;
  background: white;
  box-shadow: 0 0 0 4rpx rgba(33, 150, 243, 0.1);
  animation: pulse 1s infinite;
}

.code-input.completed {
  border-color: #4CAF50;
  background: #E8F5E8;
  color: #2E7D32;
}

.code-input.next-focus {
  border-color: #FF9800;
  background: #FFF3E0;
  animation: blink 1s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 4rpx rgba(33, 150, 243, 0.1); }
  50% { box-shadow: 0 0 0 8rpx rgba(33, 150, 243, 0.2); }
  100% { box-shadow: 0 0 0 4rpx rgba(33, 150, 243, 0.1); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

.input-separator {
  font-size: 32rpx;
  color: #999;
  font-weight: bold;
}

/* 粘贴按钮区域 */
.paste-section {
  margin-bottom: 20rpx;
}

.paste-btn {
  width: 100%;
  height: 64rpx;
  background: #F5F5F5;
  color: #666;
  border: 1rpx solid #E0E0E0;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
}

.paste-btn:active {
  background: #E8F5E8;
  border-color: #4CAF50;
  color: #4CAF50;
  transform: scale(0.98);
}
.line{
	border-bottom: 2rpx dotted #9298FA;
}
.paste-icon {
  font-size: 24rpx;
}

.paste-text {
  font-size: 28rpx;
}

.exchange-btn {
  width: 100%;
  height: 88rpx;
  background: #565FFD;
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  transition: all 0.3s ease;
}

.exchange-btn:active {
  background: #1976D2;
  transform: translateY(2rpx);
}

.exchange-btn.disabled {
  background: #E0E0E0;
  color: #999;
  transform: none;
}

/* 规则说明区域 */
.rules-section {
  border-radius: 20rpx;
  padding: 40rpx;
 
}

.rules-title {
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
margin-bottom: 28rpx;
}

.rules-list {
  padding-top: 30rpx;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-number {
  font-size: 28rpx;
  color: #595959;
  font-weight: bold;
  min-width: 40rpx;
}

.rule-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
  line-height: 1.5;
}

/* 弹窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
}

/* 成功弹窗 */
.success-modal {
  background: white;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-content {
  padding: 60rpx 40rpx 40rpx;
  text-align: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
}

.check-icon {
  font-size: 60rpx;
  color: white;
  font-weight: bold;
}

.success-title {
width: 176rpx;
height: 60rpx;
font-weight: 600;
font-size: 44rpx;
color: #333333;
line-height: 60rpx;
text-align: left;
font-style: normal;
text-transform: none;
}

.success-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 20rpx;
}

.success-info:last-of-type {
  border-bottom: none;
  margin-bottom: 40rpx;
}

.info-label {

font-weight: 400;
font-size: 32rpx;
color: #595959;
line-height: 44rpx;
text-align: center;
font-style: normal;
text-transform: none;
}

.info-value {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
}

.confirm-btn {
  width: 100%;
height: 80rpx;
background: #4593FA;
border-radius: 38rpx 38rpx 38rpx 38rpx;
color: #fff;
}

.confirm-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
}

/* 失败弹窗 */
.fail-modal {
  background: white;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.fail-icon {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(244, 67, 54, 0.3);
}

.cross-icon {
  font-size: 60rpx;
  color: white;
  font-weight: bold;
}

.fail-title {
  font-size: 40rpx;
  font-weight: 800;
  color: #1A1A1A;
  display: block;
  margin-bottom: 20rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fail-message {
  font-size: 28rpx;
  color: #F44336;
  font-weight: 600;
  display: block;
  margin-bottom: 40rpx;
}

.fail-reasons {
  text-align: left;
  margin-bottom: 40rpx;
}

.reason-title {
  font-size: 28rpx;
  color: #666;
  font-weight: 600;
  display: block;
  margin-bottom: 16rpx;
}

.reason-item {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
  padding-left: 20rpx;
}

.fail-buttons {
  display: flex;
  gap: 20rpx;
}

.retry-btn {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 700;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.retry-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
}

.cancel-btn {
  flex: 1;
  height: 80rpx;
  background: #F5F5F5;
  color: #666;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cancel-btn:active {
  background: #E0E0E0;
  transform: translateY(2rpx);
}

/* 动画 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>
